<template>
<section>
	<router-link to='/home'><div class="lb-left"></div></router-link>
		<div class="lb-right"><img src="../image/lb-right.png" alt=""></div>
		<div class="lb">
			<img src="../image/1492070635_97471.jpg">
		</div>
		<div class="cent">
			<div class="cent-top">
				<span>单程</span>
				<span>往返</span>
			</div>
		
			<div class="inform" @click="request(true)">
				<span class="in-1">通知</span>
				<span class="in-2">【暑期特惠】亲子出游，立减50；多人出游,...</span>
				<span class="in-3">></span>
			</div>
			
			<div class="address">
				<p class="address-left">上海</p>
				<div><div class="address-cent"><span></span></div></div>
				<p class="address-right">北京</p>
			</div>

			<div class="date">
				<p>08-22 <span>周二</span> </p>
				<p></p>
			</div>

			<div class="btn">
					<img src="../image/magnifire.png" alt="">
					<p>查询</p>
			</div>

		</div>

		<div class="speciai">
			<div><p><img src="../image/sale_flightIcon.png" alt=""></p><span>国内特价</span></div>
			<p>特价机票 , 有你想要&nbsp;></p>
		</div>

		<div class="logos">
		</div>
		
		<footer>
			<div><img src="../image/foot-1.png" alt=""></div>
			<div><img src="../image/foot-2.png" alt=""></div>
			<div><img src="../image/foot-3.png" alt=""></div>
			<div><img src="../image/foot-4.png" alt=""></div>
		</footer>

		<div id="inform" v-show="a">
			<div class="header">
				<p>详情</p>
			</div>
			<div id="center">
				<p>【暑期特惠】亲子出游，立减50；多人出游，立减30。即日起，除了航班已展示立减优惠外，亲子出游，下单后立减50；两人及以上出游，下单后立减30。多订多惠，敬请关注！</p>
			</div>
			<div id="footer">
				
			</div>
		</div>

		</section>
</template>
<style type="text/css" scoped>
	#footer{
		width: 1.5rem;
		height: 1.5rem;
		background: url('../image/bigX.png') no-repeat;
		position: fixed;
		top: 85%;
		left: 45%;
		margin: 0 auto;
	}
	#center{
		font-size: .35rem;
		line-height: .7rem;
		padding: .7rem;
	}
	.header{
		text-align: center;
		line-height: 1rem;
		font-size: .5rem;
		padding-top: .2rem;
	}
	#inform{
		position: fixed;
		background: #fff;
		width: 100%;
		height: 100%;
		top: .01rem;
	}
	html{
			background: #f1f1f1;
		}
		.lb{
			width: 100%;
			height: 3rem;
		}
		.lb img{
			width: 100%;
			height: 3rem;
		} 
		.lb-left{
			width: 1rem;
			height: 1rem;
			background: url('../image/img.png') no-repeat -5.92rem -9.42666666rem;
			position: fixed;
			left: .3rem;
			top: .3rem;
		}
		.lb-right{
			position: fixed;
			right:.3rem;
			top: .3rem;
		}
		.cent{
			display: flex;
			flex-direction: column;
			background: #fff;
			height: 8rem;
			margin: .2rem;
			border-radius: .1rem;
		}
		.cent-top{
			width: 100%;
			height: 1rem;
			display: flex;
		}
		.cent-top>span{
			width: 50%;
			height: 1rem;
			line-height: 1rem;
			text-align: center;
			font-size: .5rem;
			color: #d30775;
		}
		.cent-top>span:last-of-type{
			background: #ccc;
		}
		.inform{
			margin: 0 0.2rem;
			height: .7rem;
			overflow: hidden;	
			line-height: .7rem;
			background: #fffcdc;
			display: flex;
			justify-content: space-around;
		}
		.in-1{
			margin-top: .1rem;
			width: 10%;
			height: .4rem;
			line-height: .4rem;
			text-align: center;
			border: .05rem solid #d30775;
			color: #d30775;
		}
		.in-2{
			width: 70%;
			height: .4rem;
			color: #a9a9a9;
		}
		.in-3{
			font-size: .5rem;
			color: #a9a9a9;
		}
		.address{
			display: flex;
			justify-content: space-around;
			font-size: .6rem;
			line-height: 2rem;
			align-items: center;
			margin: .3rem;
			border-bottom: .01rem solid #000;
		}
		.address-cent{
			background: url('../image/img.png') no-repeat -4.72rem -20.48rem;
			width: .89rem;
			height: .8rem;
			display: flex;
			align-items: center;
			justify-content: space-around;

		}
		.address-cent>span{
			display: block;
			background: url('../image/img.png') no-repeat -4.906666666666666666rem -21.733333333333333333rem;
			width: 0.52rem;
			height: 0.2133333333333333333333333333333333rem;
		}
		.date{
			margin: .3rem;
			font-size: .6rem;
			line-height: 2rem;
			margin: 0  1rem;
			border-bottom: .01rem solid #000;
		}
		.btn{
			line-height: 1.3rem;
			font-size: .4rem;
			background: #d30775;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: .3rem;
			text-align: center;
			color: #fff;
		}
		.speciai{
			line-height: 1.3rem;
			font-size: .3rem;
			display: flex;
			justify-content: space-between;
			background: #fff;
			border-radius: .1rem;
			margin: 0 .3rem;
		}
		.speciai>div{
			display: flex;
			align-items: center;
			margin-left: .2rem;
		}
		.speciai>div>span{
			margin-left: .2rem;
		}
		.speciai>p{
			color: #ccc;
			margin-right: .2rem;
		}
		.logos{
			width: 4rem;
			height: 1rem;
			background: url('../image/lvtu.png')no-repeat;
			margin: .3rem auto;

		}
		footer{
			width: 100%;
			display: flex;
			justify-content: space-around;
			position: fixed;
			background: #fff;
			bottom: .00000000000000000000001rem;
			text-align: center;
		}
		footer>div{
			padding: .1rem 0;
		}
</style>
<script type="text/javascript">
export default{
	data(){
		return{
   			   a:false
   		}
	},
	methods:{
		request(cur){
        	this.a = cur;
      	}
	}
}
</script>